<template>
    <div>
        <div class="login-verify-v1">
            <h3 class="verify-v1-title">
                申请使用
                <span class="iconfont icon-close" @click="closePhoneAlert"></span>
            </h3>
            <div>
                <div class="displayFlex winput-name">
                    <span class="input-name displayFlex ">手机</span>
                    <phone-check class="flex1" :porpsContent="phoneProps" @changeCheck="phoneCheckFn"></phone-check>
                </div>
                <div class="displayFlex winput-name">
                    <span class="input-name displayFlex ">验证码</span>
                    <code-check class="flex1" ref="codeCheck" :codeMsgProps="codeProps" @getCode="getCode"
                        @changeCheck="checkCodeFn"></code-check>
                </div>
                <div class="languege-code-wtext">
                    <span class="displayBlock voice-code-text1" v-if="cantGetCode && !showPhoneComing">收不到验证码？点击获取<span
                            class="languege-code-text" @click="getVoiceCode">语音验证码</span></span>
                    <span class="displayBlock voice-code-text1" v-if="showPhoneComing">电话快来了，请留意您的手机的来电</span>
                </div>
                <div class="choise-location displayFlex" v-if="isNeedPicker" @click="$emit('choiseProvince')">
                    <span class="input-name displayFlex">店铺地址</span>
                    <span class="picker-content flex1 displayFlex flexAlginItems"
                        :class="{'color-ccc':!choiseArea}">{{choiseArea||'请选择地址'}}</span>
                    <span class="iconfont icon-arrows_down"></span>
                </div>
                <div class="apply-use">
                    <button class="apply-use-btn" @click="submitApply" :class="{'disabled':!isCanSubmit}">马上申请</button>
                </div>
            </div>
        </div>
        <v-bord v-if="commentBordShow">
            <div @click="pickerShowFn(false)" slot="cantClick" class="com_black"></div>
        </v-bord>
        <three-picker ref="picker" @closePicker="closePicker" class="picker" v-if="isNeedPicker"
            :pickerProps="pickerProps">
        </three-picker>
    </div>
</template>

<script>
import { Picker } from 'mint-ui';
export default {
    name: "Apply",
    props: {
        pickerProps: Object
    },
    data () {
        return {
            phoneNum: '',//手机号
            code: '',//验证码
            isCanSubmit: false,//是否可提交
            cantGetCode: false,//是否可获取验证码
            showPhoneComing: false,//codeCheck返回的参数
            commentBordShow: true,//蒙版是否显示
            buttonText: '申请免费试用',//提交按钮的字样
            pickerShow: false,//三级联动
            choiseAreaId: 0,//选择的省市id
            isNeedPicker: true,//是否需要选择地址的
            choiseArea: '',//选择的地址
            phoneProps: {//传入phoneCheck里面的参数
                isShowRedWarn: false,
            },
            codeProps: {//传入codeCheck里面的参数
                isShowRedWarn: false,
                isNeedClearIcon: false,
                codeLength: 4,
            },
            phoneObj: { phoneTrue: false, phoneNum: '' },//phoneCheck返回的参数
            codeObj: { codeTrue: false, code: null },//codeCheck返回的参数
            scrollTop: 0,
        }
    },
    created () {
        this.scrollTop = $(window).scrollTop();
    },
    mounted () {
        let that = this;
        this.loginVerifyObj = Object.assign({}, this.loginVerifyObj, this.loginVerifyProp)
        // let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        $('.login-verify-v1').css({ "top": parseInt(that.scrollTop) + window.screen.height / 3 + "px" })
    },
    methods: {
        closePhoneAlert () {
            this.$emit('closePhoneAlert');
        },
        phoneCheckFn (obj) {
            if (!this.passwordLogin || this.resetPw) {
                if (obj.phoneTrue && this.$refs.codeCheck.codeMsg.codeDown == '获取验证码') {
                    this.codeProps.isCangetCode = true;
                    this.codeProps = Object.assign({}, this.codeProps);
                } else {
                    this.codeProps.isCangetCode = false;
                    this.codeProps = Object.assign({}, this.codeProps);
                }
            }
            this.phoneObj = Object.assign({}, this.phoneObj, obj);
            this.checkIsCanSubmit();
        },
        checkCodeFn (obj) {
            this.codeObj = Object.assign({}, this.codeObj, obj);
            this.checkIsCanSubmit();
        },
        /*获取验证码*/
        getCode () {
            let that = this;
            this.codeProps.isCangetCode = false;
            this.codeProps.time = 60;
            this.codeProps = Object.assign({}, this.codeProps);
            let url = `${this.NW_API}/api/send/code/phone/${this.phoneObj.phoneNum}`;
            that.cantGetCode = true;
            that.getCodeTimer = setInterval(() => {
                that.codeProps.time--;
                that.codeProps.codeDown = `重新获取${that.codeProps.time}s`;
                that.codeProps = Object.assign({}, that.codeProps);
                if (that.codeProps.time < 0) {
                    that.codeProps.isCangetCode = true;
                    that.codeProps.codeDown = `重新获取`;
                    that.codeProps = Object.assign({}, this.codeProps);
                    clearInterval(that.getCodeTimer);
                }
            }, 1000);
            this.xurl.post(url).then((result) => {
                if (result.success) {
                    that.$root.$emit('toast', { msg: '发送验证码成功' });
                }
            })
        },
        checkIsCanSubmit () {
            if (this.phoneObj.phoneTrue && this.codeObj.codeTrue && this.choiseArea) {
                this.isCanSubmit = true;
            } else {
                this.isCanSubmit = false;
            }
        },
        /*提交*/
        submitApply () {
            let url = `${this.NW_API_API_LOCALE_VERSION}/store/apply/create`;
            let that = this;
            let areaId = that.$route.query && that.$route.query.areaId || null;
            let inviteCode = that.$route.query && that.$route.query.inviteCode || null;
            url += `${this.hrefHasQuery(url)}phone=${that.phoneObj.phoneNum}`;
            if (this.$route.query && !this.choiseAreaId) {
                if (this.$route.query.areaId) {
                    url += `${this.hrefHasQuery(url)}areaId=${areaId}`;
                } else if (this.choiseAreaId) {
                    url += `${this.hrefHasQuery(url)}areaId=${areaId}`;
                }
                if (this.$route.query.inviteCode) {
                    url += `${this.hrefHasQuery(url)}inviteCode=${inviteCode}`;
                }
            } else if (this.choiseAreaId) {
                url += `${this.hrefHasQuery(url)}areaId=${this.choiseAreaId}`;
            }
            // let params ={
            //     phone:that.phoneObj.phoneNum,
            //     agentId:agentId,
            //     inviteCode:inviteCode,
            // }
            this.xurl.postDataJsonLoading(url).then((data) => {
                if (data.success) {
                    that.$root.$emit('toast', { msg: '提交成功' });
                    /*TODO 添加去os*/
                    if (that.$route.query.isHKHW && that.$route.query.isHKHW != 'false') {
                        setTimeout(() => {
                            if (that.isIphone) {
                                window.webkit.messageHandlers.openPangu.postMessage(JSON.stringify('openPangu'));
                                setTimeout(() => {
                                    window.location.href = "https://apps.apple.com/cn/app/OS%E9%9B%B6%E5%94%AE/id1179199946";
                                    setTimeout(() => {
                                        window.location.href = "https://m.pg.yibaotong.top";
                                    }, 2000)
                                }, 2000)
                            } else if (that.isAndroid) {
                                window.htmlInteracAndroid.toOsApp();
                                setTimeout(() => {
                                    window.location.href = "https://download.pg.yibaotong.top/android/OS零售.apk";
                                    setTimeout(() => {
                                        window.location.href = "https://m.pg.yibaotong.top";
                                    }, 2000)
                                }, 2000)
                            }
                        }, 1000)
                    } else {
                        setTimeout(() => {
                            that.toOS();
                        }, 1000)
                    }
                } else if (data.errMsg) {
                    that.$root.$emit('toast', { msg: data.errMsg })
                } else {
                    that.$root.$emit('toast', { msg: "提交失败" })
                }
            })

        },
        getVoiceCode () {
            let url = `${this.NW_API}/api/voice/code/send/phone/${this.phoneObj.phoneNum}`
            this.xurl.put(url).then((data) => {
                if (data.success) {
                    this.showPhoneComing = true;
                } else if (data.errMsg) {
                    this.$root.$emit('toast', { msg: data.errMsg })
                } else {
                    this.$root.$emit('toast', { msg: '语音验证码获取失败' });
                }
            })
        },
        pickerShowFn (boolean) {
            if (this.$refs && this.$refs.picker) {
                this.$refs.picker.pickerShow = boolean;
            }
        },
        closePicker (obj) {
            this.choiseArea = obj.location;
            this.choiseAreaId = obj.areaId;
        }
    },
    watch: {
        choiseArea (val) {
            this.checkIsCanSubmit();
        }
    },
    components: {
        'v-bord': () => import('../../commonComponents/alert/Bord'),
        'phone-check': () => import("../../commonComponents/phone/PhoneCheck"),
        'code-check': () => import("../../commonComponents/codeCheck/CodeCheck"),
        "three-picker": () => import("../../commonComponents/picker/ThreePicker"),
    }
}
</script>

<style scoped lang="scss">
.winput-name {
    height: 0.5rem;
    background-color: #f6f8fa;
    padding: 0 0.2rem;
    line-height: 0.5rem;
    margin-top: 0.15rem;
}
.login-verify-v1 /deep/ {
    .phone-input,
    .code-input,
    .count-down {
        width: 100%;
        height: 0.5rem;
        line-height: 0.5rem;
        border-radius: 5px;
        border: none;
        padding-left: 0;
        margin-top: 0;
        background-color: transparent;
    }
    .booking_close_button {
        top: 50%;
        transform: translateY(-50%);
    }
    .count-down-wrap {
        margin-top: 0;
    }
    .count-down {
        color: #3b71ba;
        font-size: 0.13rem;
    }
    .disabled.count-down {
        color: #ccc;
    }
    .phone-input,
    .code-input {
        color: #333;
        font-size: 0.15rem;
        font-weight: bold;
    }
    .phone-input,
    .code-input {
        color: #333;
        font-size: 0.15rem;
        font-weight: bold;
    }
    .phone-input::-webkit-input-placeholder,
    .code-input::-webkit-input-placeholder {
        font-weight: normal;
    }
    .count-down {
        font-size: 0.13rem;
    }
}
.login-verify-v1 {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 3.5rem;
    background-color: #fff;
    -webkit-border-radius: 0.1rem;
    -moz-border-radius: 0.1rem;
    border-radius: 0.1rem;
    z-index: 1060;
    padding: 0.15rem 0.15rem 0.75rem;
}
.input-name {
    display: inline-block;
    width: 0.71rem;
    font-size: 0.15rem;
    color: #666666;
}
.icon-close {
    display: inline-block;
    position: absolute;
    right: 0.15rem;
    top: 0.21rem;
    font-size: 0.12rem;
    color: #cccccc;
    width: 0.2rem;
    height: 0.2rem;
}
.verify-v1-title {
    color: #000;
    font-size: 0.16rem;
    text-align: center;
}
.apply-use-btn {
    width: 100%;
    background-color: #5d89e8;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    height: 0.5rem;
    width: 3.2rem;
    letter-spacing: 0.01rem;
}
.apply-use-btn.disabled {
    background-color: #cccccc;
}
.apply-use {
    position: absolute;
    bottom: 0.1rem;
}
.languege-code-text {
    color: #3b71ba;
}
.languege-code-wtext {
    color: #999999;
    padding-left: 0.2rem;
    font-size: 0.12rem;
}
.voice-code-text1 {
    padding-top: 0.1rem;
}
.choise-location {
    height: 0.5rem;
    line-height: 0.5rem;
    background-color: #f6f8fa;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 0.2rem;
    color: #666;
    font-size: 0.15rem;
    margin-top: 0.2rem;
}
.picker-content {
    font-weight: bold;
    color: #333;
    line-height: normal;
    letter-spacing: 0.02rem;
}
</style>
